<template>
  <!-- 空置天数占比 -->
  <div class="vacant-rate chart-box2">
    <div class="chart-title">空置天数占比</div>
    <div class="chart-content">
      <div class="chart-container" :id="chartId"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
  nextTick,
  watch,
  toRaw,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import common from "../../utils/common";
import store from "../../../../store";

export default defineComponent({
  name: "VacantRate",
  components: {},
  setup() {
    const state = reactive({
      chartId: "vacantRateChart",
      chart: null,
      data: [],
    });

    const initChart = () => {
      const data = state.data;

      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
      });

      state.chart.data(data);

      state.chart.coordinate("theta", {
        radius: 0.95,
      });

      state.chart.scale("percent", {
        formatter: (val) => {
          val = val ? val + "%" : "";
          return val;
        },
      });

      state.chart.axis(false); // 关闭坐标轴
      state.chart
        .interval()
        .adjust("stack")
        .position("percent")
        .color("groupName")
        .label("percent", {
          offset: -30,
          style: {
            fontSize: 12,
            textAlign: "center",
            shadowBlur: 2,
            shadowColor: "rgba(0, 0, 0, 0.45)",
            fill: "rgba(255,255,255,0.8)",
          },
        })
        .tooltip("groupName*percent", (groupName, percent) => {
          percent = percent + "%";
          return {
            name: groupName,
            value: percent,
          };
        })
        .style({
          lineWidth: 1,
          stroke: "#fff",
        });

      state.chart.legend({
        position: "bottom",
        // custom: true,
        // items: state.data.filter((item, index) => {
        //   if (item.percent) {
        //     item.id = item.groupValue;
        //     item.name = item.groupName;
        //     item.value = item.percent;
        //     item.index = index;
        //     return true;
        //   }
        //   return false;
        // }),
        // marker: (name, index, item) => {
        //   return {
        //     style: {
        //       fill: common.themeColor10[item.index],
        //       stroke: "#363636",
        //       lineWidth: 1,
        //     },
        //   };
        // },
        itemName: {
          style: {
            fill: "rgba(255,255,255,0.6)",
          },
        },
      });

      state.chart.interaction("element-single-selected");

      state.chart.render();
    };

    watch(
      () => store.getters.rentControl.VacantDayRatio,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { VacantDayRatio } = store.getters.rentControl;
      if (VacantDayRatio) {
        // console.log("---------VacantDayRatio", toRaw(VacantDayRatio));
        state.data = VacantDayRatio.list.filter((item) => !!item.percent);
        if (state.chart) {
          state.chart.changeData(state.data);
        } else {
          nextTick(() => {
            initChart();
          });
        }
      }
    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });
    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
